// 使用但文件组件，实现评论列表
import React, { useState } from 'react';

// 自定义组件
import { CommentCount } from './components/CommentCount';
import { Tabs } from './components/Tabs'
import { Porm } from './components/Porm'
import { CommentList } from './components/CommentList.js'
import './App.css'; // 导入样式
import avatar from './images/avatar.png'; // 导入图片
const BlistKey = 'B-list'

export const App = () => {
  const [list, setList] = useState([
    {
      id: 4,
      author: '五月天4',
      comment: '不打扰，是我的温柔4',
      time: new Date('2021-10-11 11:09:00'),
      // 1: 点赞 0：无态度 -1:踩
      attitude: -1,
    },
    {
      id: 1,
      author: '刘德华',
      comment: '给我一杯忘情水',
      time: new Date('2021-10-10 09:09:00'),
      // 1: 点赞 0：无态度 -1:踩
      attitude: 1,
    },
    {
      id: 2,
      author: '周杰伦',
      comment: '哎哟，不错哦',
      time: new Date('2021-10-11 10:09:00'),
      // 1: 点赞 0：无态度 -1:踩
      attitude: 0,
    },
    {
      id: 3,
      author: '五月天',
      comment: '不打扰，是我的温柔',
      time: new Date('2021-11-11 11:09:00'),
      // 1: 点赞 0：无态度 -1:踩
      attitude: -1,
    },
  ])
  const [active, setActive] = useState('hot')
  const [tabs, setTabs] = useState([
    {
      id: 1,
      name: '热度',
      type: 'hot',
    },
    {
      id: 2,
      name: '时间',
      type: 'time',
    },
  ])
  const changeSortType = (type) => {
    console.log(type);
    if (type === 'hot') {
      const newList = list.sort((a, b) => {
        return b.time.getTime() - a.time.getTime()
      })
      setList(newList)
      setActive(type)

    } else {
      const newList = list.sort((a, b) => {
        return a.time.getTime() - b.time.getTime()
      })
      setList(newList)
      setActive(type)
    }
  }
  const handleAddComment = (txt) => {
    console.log(txt);
    // 组装一个评论
    const comment = {
      id: Math.random(),
      author: 'ZY',
      comment: txt,
      time: new Date(),
      attitude: 0,
    };
    // 将评论放到 list 中去
    // this.state.list.unshift(comment);
    setList([comment, ...list])
  };
  const changeAttitude = (id, attitude) => {
    console.log(id, attitude);
    const newList = list.map((item) => {
      if (item.id === id) {
        return {
          ...item,
          attitude
        }
      }
      return item
    })
    setList(newList)

  }
  const delComment = (e, id) => {
    console.log(id);
    // 操作数组，根据id，删除对应元素。
    // filter 过滤数组
    const newList = list.filter((item) => item.id !== id);
    setList(newList)
  };

  return (
    <div className="comment-root">
      <div className="comment-container">
        {/* 评论数 */}
        <CommentCount const={list.length} />

        {/* 排序tab */}
        <Tabs tabs={tabs} active={active} changeSortType={changeSortType} />

        {/* 发表评论区 */}
        <Porm handleAddComment={handleAddComment} />

        {/* 评论列表区 */}
        <CommentList list={list} changeAttitude={changeAttitude} delComment={delComment} />
      </div>
    </div>
  )
}
export default App
